<template>
    <div class="persist-container">
       <p>{{ $store.state.user.info }}</p>
       <button @click="setCache">点击设置缓存</button>
    </div>
</template>

<script>
import { defineComponent } from 'vue'
import { useStore } from 'vuex'
export default defineComponent({
  setup () {
    const Store = useStore()
    const setCache = () => {
      Store.commit('user/SET_INFO', '已经设置了缓存')
    }
    return {
      setCache
    }
  }
})
</script>

<style lang="less" scoped>
    .persist-container {
        display: flex;
        padding-top: 15%;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        button {
            width: 150px;
            height: 44px;
            line-height: 44px;
            border-radius: 5px;
            background-color: rgb(79, 140, 245);
            margin-top: 10px;
            color: #fff;
        }
    }
</style>
